<!--住院病案复印详情-->
<script setup xmlns="http://www.w3.org/1999/html">

import {onBeforeMount, onMounted, ref} from "vue";
import {Check, Checked, CircleCheck, Clock, Document, Edit, List} from "@element-plus/icons-vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import _ from "lodash";

//退款变量
const refund=ref(true);
//是否为代办
const ifAgent=ref(true);
//申请状态
const applicationStatus=ref(2);
//详细信息数据
//患者信息
const patientDetail=ref({
  id:'',
  status:'0',
  admissionId:'',
  caseId:'',
  name:'',//这条没有
  idCardType:'',//这条没有
  idCardId:'',
  phone:'',//这条没有
  intoDate:'',
  outDate:''
})
//其他信息
const applicationDetail=ref({
  //额外信息
  checkStatus:0,
  admissionId:'',
  newCheckStatus:0,
  caseId:'',
  checkTimeMap:{},
  //审核备注
  checkInfo:'',
  //申请信息
  id:'',
  status:'',
  createTime:'',
  copyNum:'',
  usageId:'',
  source:'',
  copyContentArr:[],
  copyInfo:'',
  //代办人信息
  agentRelation:'',
  agentName:'',
  agentPhone:'',
  agentCertType:'',
  agentCertNum:'',
  //取件信息
  pickupType:'',
  pickupName:'',
  pickupPhone:'',
  payType:'',
  pickupAddr:'',
  //订单信息
  payId:''
})

//根据申请状态修改时间轴显示
const setTimeline=()=>{
  //在这里执行时间轴设定
  console.log(applicationDetail.value.checkTimeMap);
  applicationStatus.value=applicationDetail.value.checkStatus;
  console.log(applicationStatus.value);
  //审核驳回分支，改变时间轴设计
  if(applicationStatus.value==3){
    timelineSettings.value=_.cloneDeep(timelineSettingsReject.value);
    timelineSettings.value[0].timestamp=applicationDetail.value.checkTimeMap[0];
    timelineSettings.value[1].timestamp=applicationDetail.value.checkTimeMap[1];
    timelineSettings.value[1].info=applicationDetail.value.checkInfo;
    console.log(timelineSettings.value);
  }
  else {
    for (let i = 0; i <= applicationStatus.value; i++) {
      for (let t = 0; t < timelineSettings.value.length; t++) {
        if (i == timelineSettings.value[t].id) {
          if (i == applicationStatus.value) {
            timelineSettings.value[t].hollow = false;
            timelineSettings.value[t].type = 'primary';
            appStatus.value.status = applicationStatus.value;
            appStatus.value.content = _.cloneDeep(timelineSettings.value[t].content);
            break;
          }
          contentFormat(i);
          timelineSettings.value[t].hollow = true;
          timelineSettings.value[t].type = 'primary';
          timelineSettings.value[t].timestamp = applicationDetail.value.checkTimeMap[i];
        }
      }
    }
  }
}

//时间轴的文字状态转换
const contentFormat=(status)=>{
  if(status==1) timelineSettings.value[1].content='审核通过';
  else if(status==2) timelineSettings.value[2].content='已支付';
  else if(status==4) timelineSettings.value[3].content='已开始复印';
  else if(status==5) timelineSettings.value[4].content='复印完成';
  else if(status==6) timelineSettings.value[5].content='已寄出';
  else if(status==7) timelineSettings.value[6].content='已签收';
}
//时间轴的设置
const timelineSettings=ref([
    {id:0,content:'申请已提交',type:'',hollow:true,timestamp:'测试数据 2024-7-7 11:11:11'},
    {id:1,content:'待审核',type:'',hollow:true,timestamp:''},
    {id:2,content:'待支付',type:'',hollow:true,timestamp:'审核已通过，请尽快支付'},
    {id:4,content:'待复印',type:'',hollow:true,timestamp:''},
    {id:5,content:'复印中',type:'',hollow:true,timestamp:''},
    {id:6,content:'待寄出',type:'',hollow:true,timestamp:''},
    {id:7,content:'待签收',type:'',hollow:true,timestamp:''},
    {id:8,content:'已完成',type:'',hollow:true,timestamp:''}
])
//审核驳回的时间轴
const timelineSettingsReject=ref([
  {id:0,content:'申请已提交',type:'primary',hollow:true,timestamp:'测试数据 2024-7-7 11:11:11'},
  {id:1,content:'审核驳回',type:'danger',hollow:false,timestamp:'',info:''}
])

//用来控制申请时间戳的状态变量
const appStatus=ref(
    {status:1,type:'warning',content:'待审核'}
);

//开局加载
onBeforeMount(()=>{
  let breadcrumbData=["病案复印管理","住院病案复印管理","住院病案复印详情"];
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumbData));
  getQueryId();
})

//获取路由中的查询参数并且查询
const getQueryId=()=>{
  let query=router.currentRoute.value.query;
  if(Object.keys(query).length!=0){
    let id=query.id;
    axios.get(getBaseURL(1)+'/v1/duplicate/medical_duplicate/select_detail/'+id).then((response)=>{
      applicationDetail.value=response.data.data;
      let admissionId=applicationDetail.value.admissionId;
      let param=qs.stringify({id:admissionId});
      axios.get(getBaseURL(5)+"/v1/hospitalization/hspt/select?"+param).then((response)=>{
        if(response.data.code==2000){
          patientDetail.value=response.data.data[0];
        }
      })
      setTimeline();
    })

  }
  else{
    ElMessage.error("查询记录异常");
  }
}

//审核通过
const applicationPass=()=>{
  applicationDetail.value.newCheckStatus=2;
  let data=qs.stringify(applicationDetail.value);
  axios.post(getBaseURL(1)+"/v1/duplicate/medical_duplicate/update",data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("更新状态成功！");
      router.push("/duplicate/medicalDuplicate/manage");
    }
    else ElMessage.error(response.data.msg);
  })
}
//审核驳回
const applicationReject=()=>{
  applicationDetail.value.newCheckStatus=3;
  let data=qs.stringify(applicationDetail.value);
  axios.post(getBaseURL(1)+"/v1/duplicate/medical_duplicate/update",data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("更新状态成功！");
      router.push("/duplicate/medicalDuplicate/manage");
    }
    else ElMessage.error(response.data.msg);
  })
}
//跳过收费环节
const applicationPaid=()=>{
  applicationDetail.value.newCheckStatus=4;
  let data=qs.stringify(applicationDetail.value);
  axios.post(getBaseURL(1)+"/v1/duplicate/medical_duplicate/update",data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("更新状态成功！");
      router.push("/duplicate/medicalDuplicate/manage");
    }
    else ElMessage.error(response.data.msg);
  })
}
</script>

<template>
  <div style="background-color:#F0F2F5;">
    <el-container class="common-layout" style="width: 90%;margin: 0 auto;">
      <el-container>
        <!--左栏信息部分-->
        <el-main style="width:75%;position: relative;padding: 0 20px;margin-bottom: 20px;">
          <!--患者信息-->
          <div style="background-color:#fff;">
            <el-row :gutter="20" style="padding: 30px;text-align: left;">
              <el-col :span="4">
                <el-text style="font-size: 16px;font-weight: bold">患者信息</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>患者姓名：</el-text><el-text type="info">{{ patientDetail.name }}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>病案号：</el-text><el-text type="info">{{patientDetail.caseId}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>住院号：</el-text><el-text type="info">{{patientDetail.admissionId}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>证件类型：</el-text><el-text type="info">{{patientDetail.idCardType}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>证件号：</el-text><el-text type="info">{{patientDetail.idCardId}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>本人电话：</el-text><el-text type="info">{{patientDetail.phone}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>入院时间：</el-text><el-text type="info">{{patientDetail.intoDate}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>出院时间：</el-text><el-text type="info">{{patientDetail.outDate}}</el-text>
              </el-col>
            </el-row>

<!--            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">-->
<!--              <el-col :span="3">-->
<!--                <el-text>证件照：</el-text>-->
<!--              </el-col>-->
<!--              <el-col :span="15">-->
<!--                <el-image style="width: 200px;height: 100px;padding-right: 15px;" src="">-->
<!--                  <template #placeholder>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;">人像面身份证</div>-->
<!--                  </template>-->
<!--                  <template #error>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;text-align: center;line-height: 100px;color:#79bbff">人像面身份证</div>-->
<!--                  </template>-->
<!--                </el-image>-->
<!--                <el-image style="width: 200px;height: 100px;" src="">-->
<!--                  <template #placeholder>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;">国徽面身份证</div>-->
<!--                  </template>-->
<!--                  <template #error>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;text-align: center;line-height: 100px;color:#79bbff">国徽面身份证</div>-->
<!--                  </template>-->
<!--                </el-image>-->
<!--              </el-col>-->
<!--            </el-row>-->
          </div>
          <!--申请信息-->
          <div style="background-color:#fff;">
            <el-row :gutter="20" style="padding: 30px;text-align: left;">
              <el-col :span="4">
                <el-text style="font-size: 16px;font-weight: bold">申请信息</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>申请类型：</el-text><el-text type="info">{{ applicationDetail.status }}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>申请时间：</el-text><el-text type="info">{{applicationDetail.createTime}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>复印份数：</el-text><el-text type="info">{{applicationDetail.copyNum}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>复印用途：</el-text><el-text type="info">{{applicationDetail.usageId}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>申请来源：</el-text><el-text type="info">{{applicationDetail.source}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="3">
                <el-text>复印内容：</el-text>
              </el-col>
              <el-col :span="21" style="padding-left: 0;position: relative;float: left;">
                <el-tag type="primary" effect="plain" style="margin-right: 5px;" v-for="item in applicationDetail.copyContentArr">
                  {{item}}
                </el-tag>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="24">
                <el-text>补充备注：</el-text><el-text type="info">{{applicationDetail.copyInfo}}</el-text>
              </el-col>
            </el-row>
          </div>
          <!--代办人信息-->
          <div style="background-color:#fff;" v-if="ifAgent.value">
            <el-row :gutter="20" style="padding: 30px;text-align: left;">
              <el-col :span="4">
                <el-text style="font-size: 16px;font-weight: bold">代办人信息</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>代办人关系：</el-text><el-text type="info">{{applicationDetail.agentRelation}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>代办人姓名：</el-text><el-text type="info">{{applicationDetail.agentName}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>代办人电话：</el-text><el-text type="info">{{applicationDetail.agentPhone}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>代办人证件类型：</el-text><el-text type="info">{{applicationDetail.agentCertType}}</el-text>
              </el-col>
              <el-col :span="16">
                <el-text>代办人证件号：</el-text><el-text type="info">{{applicationDetail.agentCertNum}}</el-text>
              </el-col>
            </el-row>

<!--            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">-->
<!--              <el-col :span="3">-->
<!--                <el-text>附件照：</el-text>-->
<!--              </el-col>-->
<!--              <el-col :span="21">-->
<!--                <el-image style="width: 200px;height: 100px;padding-right: 15px;" src="">-->
<!--                  <template #placeholder>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;">人像面身份证</div>-->
<!--                  </template>-->
<!--                  <template #error>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;text-align: center;line-height: 100px;color:#79bbff">人像面身份证</div>-->
<!--                  </template>-->
<!--                </el-image>-->
<!--                <el-image style="width: 200px;height: 100px;padding-right: 15px;" src="">-->
<!--                  <template #placeholder>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;">国徽面身份证</div>-->
<!--                  </template>-->
<!--                  <template #error>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;text-align: center;line-height: 100px;color:#79bbff">国徽面身份证</div>-->
<!--                  </template>-->
<!--                </el-image>-->
<!--                <el-image style="width: 200px;height: 100px;" src="">-->
<!--                  <template #placeholder>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;">代办人委托书</div>-->
<!--                  </template>-->
<!--                  <template #error>-->
<!--                    <div style="width: 200px;height: 100px;background-color:#ecf5ff;text-align: center;line-height: 100px;color:#79bbff">代办人委托书</div>-->
<!--                  </template>-->
<!--                </el-image>-->
<!--              </el-col>-->
<!--            </el-row>-->
          </div>
          <!--取件信息-->
          <div style="background-color:#fff;">
            <el-row :gutter="20" style="padding: 30px;text-align: left;">
              <el-col :span="4">
                <el-text style="font-size: 16px;font-weight: bold">取件信息</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>领取方式：</el-text><el-text type="info">{{applicationDetail.pickupType}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>取件人姓名：</el-text><el-text type="info">{{applicationDetail.pickupName}}</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>联系电话：</el-text><el-text type="info">{{applicationDetail.pickupPhone}}</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>邮寄费用：</el-text><el-text type="info">12.0元</el-text>
              </el-col>
              <el-col :span="16">
                <el-text>邮寄地址：</el-text><el-text type="info">{{ applicationDetail.pickupAddr }}</el-text>
              </el-col>
            </el-row>
          </div>
          <!--订单信息-->
          <div style="background-color:#fff;">
            <el-row :gutter="20" style="padding: 30px;text-align: left;">
              <el-col :span="4">
                <el-text style="font-size: 16px;font-weight: bold">订单信息</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>订单号：</el-text><el-text type="info">订单号</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>订单金额：</el-text><el-text type="danger">订单金额</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>支付方式：</el-text><el-text type="info">支付方式</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>订单状态：</el-text><el-text type="info">订单状态</el-text>
              </el-col>
              <el-col :span="16">
                <el-text>支付时间：</el-text><el-text type="info">支付时间</el-text>
              </el-col>
            </el-row>
          </div>

          <div style="background-color:#fff;" v-if="refund.value">
            <!--退款信息，仅退款订单展示-->
            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="8">
                <el-text>退款金额：</el-text><el-text type="danger">退款金额</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>退款方式：</el-text><el-text type="info">退款方式</el-text>
              </el-col>
              <el-col :span="8">
                <el-text>退款时间：</el-text><el-text type="info">退款时间</el-text>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="padding: 0 30px 30px 30px;text-align: left;">
              <el-col :span="24">
                <el-text>退款备注：</el-text><el-text type="info">退款备注</el-text>
              </el-col>
            </el-row>
          </div>
        </el-main>

        <!--进度详情-->
        <el-aside style="background-color:#fff;width: 25%;position: relative;margin-right:20px;margin-bottom: 20px;">
          <el-row :gutter="20" style="padding:10px 0;margin: 0;width: 100%;text-align: center;height: 100px;line-height: 70px;">
            <el-col :span="10">
              <span style="font-size: 16px;font-weight: bold;">进度详情</span>
            </el-col>
            <el-col :span="14">
              <el-text>当前申请状态：</el-text><el-text :type="appStatus.type" style="font-weight: bold">{{appStatus.content}}</el-text>
            </el-col>
          </el-row>

          <el-timeline style="max-width:100%;position: relative;text-align: left;padding-left: 30px;">
            <el-row :gutter="20" style="padding:0;margin:0;">
              <!--左侧图标-->
              <el-col :span="3" style="padding: 0;">
                <el-icon class="icon">
                  <Document/>
                </el-icon>
                <el-icon class="icon">
                  <Edit/>
                </el-icon>
                <el-icon class="icon">
                  <Coin/>
                </el-icon>
                <el-icon class="icon">
                  <Printer/>
                </el-icon>
                <el-icon class="icon">
                  <Printer/>
                </el-icon>
                <el-icon class="icon">
                  <Clock/>
                </el-icon>
                <el-icon class="icon">
                  <DocumentChecked/>
                </el-icon>
                <el-icon class="icon">
                  <CircleCheck/>
                </el-icon>
              </el-col>
              <!--申请进度时间轴-->
              <el-col :span="21" style="position: relative;top: 8px;padding-right: 0;">
                <el-timeline-item class="timeDot" :timestamp="timelineSettings[0].timestamp" :type="timelineSettings[0].type" :hollow="timelineSettings[0].hollow">
                  {{timelineSettings[0].content}}
                </el-timeline-item>
                <el-timeline-item class="timeDot" :timestamp="timelineSettings[1].timestamp" :type="timelineSettings[1].type" :hollow="timelineSettings[1].hollow">
                  {{timelineSettings[1].content}}
                  <br>
                  <el-text v-if="applicationStatus==3" type="danger">
                    驳回原因：{{timelineSettings[1].info}}
                  </el-text>
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[2].timestamp" :type="timelineSettings[2].type" :hollow="timelineSettings[2].hollow">
                  <div style="margin-bottom: 8px;">{{timelineSettings[2].content}}</div>
                  <el-button v-if="applicationStatus==2" type="text" style="border:0;color: red;" @click="applicationPaid">去收费 ></el-button>
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[3].timestamp" :type="timelineSettings[3].type" :hollow="timelineSettings[3].hollow">
                  {{timelineSettings[3].content}}
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[4].timestamp" :type="timelineSettings[4].type" :hollow="timelineSettings[4].hollow">
                  {{timelineSettings[4].content}}
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[5].timestamp" :type="timelineSettings[5].type" :hollow="timelineSettings[5].hollow">
                  {{timelineSettings[5].content}}
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[6].timestamp" :type="timelineSettings[6].type" :hollow="timelineSettings[6].hollow">
                  {{timelineSettings[6].content}}
                </el-timeline-item>
                <el-timeline-item v-if="applicationStatus!=3" class="timeDot" :timestamp="timelineSettings[7].timestamp" :type="timelineSettings[7].type" :hollow="timelineSettings[7].hollow">
                  {{timelineSettings[7].content}}
                </el-timeline-item>
              </el-col>
            </el-row>
          </el-timeline>
        </el-aside>
      </el-container>
      <!--悬浮审核条，仅在申请处于待审核状态时显示-->
      <el-footer v-if="applicationStatus==1"
                 style="background-color:#fff;
                        padding: 0;
                        position: fixed;
                        bottom: 0;
                        width: 1150px;
                        height: 60px;
                        margin: 0 auto;">
        <el-row :gutter="20" style="padding:10px 0;margin: 0;width: 100%;">
          <el-col :span="19">
            <el-input type="textarea" placeholder="审核备注" show-word-limit maxlength="100" rows="1" v-model="applicationDetail.checkInfo"/>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="applicationPass">审核通过</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" @click="applicationReject">审核驳回</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.icon{
  font-size: 25px;
  margin-bottom: 65px;
  color: #b1b3b8;
}
.timeDot{
  height: 70px;
  padding-right: 0;
  width: 100%
}
</style>